<template>
  <div>
    <div :class="isLoginReg ? 'header transparent' : 'header head-bg'">
      <div class="header-left point align-center">
        <!-- <img @click="backhome" src="@/assets/images/logo.png" alt /> -->
        <img
          @click="backhome"
          src="@/assets/theme1/logo.png"
          alt
          v-if="!isLoginReg"
        />
        <img
          @click="backhome"
          src="@/assets/theme1/logo.png"
          alt
          v-if="isLoginReg"
        />
        <div class="titletab share-color flex js-st">
          <div
            v-for="(item, index) in tab"
            class="sign-tab"
            :class="{ 'active-line': $route.path.includes(item.path) }"
            @click="jump(item.id, item.path)"
            v-clickout="hiddenChoice"
            @mouseenter="leverIschoice(item.id)"
            @mouseleave="leverNochoice(item.id)"
            :key="index"
          >
            <span class>{{ item.title }}</span>
            <svg-icon
              v-if="item.id === 12"
              class="text-22 ml-4"
              data_iconName="ic_cup_icon"
            ></svg-icon>
            <i
              class="el-icon-arrow-down"
              v-if="
                (item.id === 4 && !ischoice) ||
                  (item.id === 5 && !isfinancial) ||
                  (item.id === 6 && !isTrading) ||
                  (item.id === 11 && meta_switch && nft_entrance && !isNFT)
              "
            ></i>
            <i
              class="el-icon-arrow-up"
              v-if="
                (item.id === 4 && ischoice) ||
                  (item.id === 5 && isfinancial) ||
                  (item.id === 6 && isTrading) ||
                  (item.id === 11 && meta_switch && nft_entrance && isNFT)
              "
            ></i>
            <div class="lever-down" v-if="item.id === 4 && ischoice">
              <Choicelever v-on:choice="choice" :isLoginReg="isLoginReg" />
            </div>
            <div class="lever-down" v-if="item.id === 5 && isfinancial">
              <ChoiceFinancial
                :isLoginReg="isLoginReg"
                :wealth_management_status="wealth_management_status"
                :defi_ore_status="defi_ore_status"
                :currency_subscription_status="currency_subscription_status"
                :wealth_management_type="wealth_management_type"
                :currency_subscription_logo="currency_subscription_logo"
                :stock_subscription_status="stock_subscription_status"
                :pledge_borrowing_status="pledge_borrowing_status"
                :stock_subscription_logo="stock_subscription_logo"
                :defi_ore_logo="defi_ore_logo"
                :wealth_management_logo="wealth_management_logo"
              />
            </div>
            <div class="lever-down" v-if="item.id === 6 && isTrading">
              <ChoiceTrading
                :flash_against_status="flash_against_status"
                :currency_transaction_status="currency_transaction_status"
              />
            </div>
            <div
              class="lever-down"
              v-if="item.id === 11 && meta_switch && nft_entrance && isNFT"
            >
              <ChoiceNft
                :meta_switch="meta_switch"
                :nft_entrance="nft_entrance"
                v-on:choice="choiceNft"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="flex share-color  align-end"
        :class="islogin ? 'logheader-right' : 'nologheader-right'"
      >
        <div class="log-box flex point" v-if="!islogin">
          <router-link to="/login">
            <div class="login share-color text-14">{{ $t("login.login") }}</div>
          </router-link>
          <router-link to="/register">
            <div class="regist lin-btn share-color text-14">
              {{ $t("register.register") }}
            </div>
          </router-link>
        </div>
        <div
          v-if="islogin && virtual_wallet"
          class="flex align-center share-color text-14 borderLight-bg radius-8 pd-demo-btn"
        >
          <div>{{ $t("header.demoAccount") }}</div>
          <div class="text-blue mg-lf-md point" @click="onChangeVirtualWallet">
            {{ $t("header.quitDemo") }}
          </div>
        </div>
        <div class="person-box js-st flex share-color point">
          <div class="other flex">
            <div
              class="round ml-30"
              @mouseenter="isperson = true"
              @mouseleave="isperson = false"
              v-if="islogin"
            >
              <i class="iconfont quote-key-text  icon-type-04-copy"></i>
              <img src="@/assets/images/head.png" alt  style="width:20px;height:20px;"/>
              <!-- 个人中心弹窗 -->
              <div class="person-buble" v-if="isperson">
                <Personbuble
                  :nickname="getuserinfo?.nickname"
                  :userid="getuserinfo?.id"
                  @onChangeVirtualWallet="onChangeVirtualWallet"
                />
              </div>
            </div>
            <div
              :class="islogin ? 'round ml-30' : 'round'"
              @click="jumppath('/announce')"
            >
              <svg-icon
                data-_icon-name="ic_head_gg"
                class=" text-24"
              ></svg-icon>
              <!-- <i class="iconfont quote-key-text mg-rt-md icon-gonggao-copy"></i> -->
            </div>
            <div
              class="round ml-30"
              v-show="androidInfo?.source_url || iosInfo?.source_url"
              @click="jumppath('/download')"
            >
              <svg-icon
                data-_icon-name="ic_head_download"
                class=" text-24"
              ></svg-icon>
              <!-- <i
                class="iconfont quote-key-text mg-rt-md icon-xian1-16-copy"
              ></i> -->
            </div>
            <div
              v-if="islogin"
              class="round ml-30"
              @mouseenter="isletter = true"
              @mouseleave="isletter = false"
            >
              <svg-icon
                data-_icon-name="ic_head_letter"
                class=" text-24"
              ></svg-icon>
              <!-- <img src="@/assets/images/head-letter.png" alt /> -->
              <!-- 未读标记 -->
              <div class="badge posi" v-if="unReadNum > 0"></div>
              <!-- 站内信弹窗 -->
              <div class="letter-buble" v-if="isletter">
                <Letterbuble @getnum="getUnread" />
              </div>
            </div>
          </div>
        </div>
        <div
          class="lang-box text-14 "
          @click="islanguage = !islanguage"
          v-clickout="hide"
        >
          {{ curentLang[0]?.label }}
          <i class="el-icon-caret-bottom"></i>
          <Language
            ref="lang"
            @close="hide"
            :isselect="islanguage"
            :language="language"
            :isLoginReg="isLoginReg"
            :isFoot="false"
          />
        </div>
      </div>
    </div>
    <!-- 客服弹窗 -->
    <ServerBox
      @oncancer="dialog = false"
      @onconfirm="dialog = false"
      :dialog="dialog"
    />
    <!-- 法币交易三方 -->
    <ThirdFiatBox
      @oncancer="thirDialog = false"
      @onconfirm="thirDialog = false"
      :dialog="thirDialog"
    ></ThirdFiatBox>
  </div>
</template>

<script>
import Personbuble from "./person-buble.vue";
import Letterbuble from "./letter-buble.vue";
import Choicelever from "./choice-lever.vue";
import ChoiceFinancial from "./choice-financial.vue";
import ChoiceTrading from "./choice-trading.vue";
import ChoiceNft from "./choice-nft.vue";
import Language from "@/components/homeModel/language.vue";
import { unreadStatistics } from "@/api/article";
import { getFastAgainstStatusApi } from "@/api/flash-against";
import { getConfig } from "@/api/user";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import ServerBox from "@/components/homeModel/serverBox.vue";
import jumpChat from "@/commonapi/chat";
import ThirdFiatBox from "@/components/homeModel/thirdFiatBox.vue";
import { getAppRenewal } from "@/api/article";
import UseSystemSetting from "@/commonapi/useSystemSetting";
// import {getCurrentInstance} from "vue";

export default {
  name: "Header",
  components: {
    Personbuble,
    Letterbuble,
    Choicelever,
    Language,
    ChoiceFinancial,
    ServerBox,
    ChoiceTrading,
    ChoiceNft,
    ThirdFiatBox,
  },
  props: { language: Array, isLoginReg: Boolean },
  setup() {
    const { chatActive } = jumpChat();
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    return {
      chatActive,
      virtual_wallet,
    };
  },
  data() {
    return {
      tab: [
        // { title: this.$t("header.legal"),id:1 ,val: "legal"},
        // { title: this.$t("header.bibi"), path: "/deal", id: 3, val: "bibi" },
      ],
      copyTab: [],
      islogin: this.$store.state.user.token ? true : false,
      isperson: false,
      ischoice: false, //选择秒合约弹窗
      isfinancial: false, //选择金融弹窗
      isletter: false,
      islanguage: false, //选择语言
      isTrading: false, //选择交易弹窗
      isNFT: false, //选择NFT和元宇宙弹窗
      curentLang: [], //当前语言
      unReadNum: 0, //站内信未读数量
      wealth_management_status: false,
      defi_ore_status: false,
      stock_status: false,
      currency_subscription_status: false,
      wealth_management_type: 1,
      currency_subscription_logo: "",
      wealth_management_logo: "",
      defi_ore_logo: "",
      fiat_currency_transaction_status: true, //法币
      systemInfos: null,
      easy_buy_type: 1,
      second_lever_status: true, //，秒合约
      lever_status: true, //合约
      flash_against_status: true, // 闪兑
      currency_transaction_status: true, //币币
      nft_entrance: true, //NFT
      meta_switch: false, //元宇宙页
      world_cup: false, //世界杯
      stock_lever_status: false,
      stock_second_lever_status: false,
      stock_subscription_status: false, //新股申购
      pledge_borrowing_status: false, //借贷
      foreign_exchange: false, //外汇
      stock_subscription_logo: "",
      url: "",
      fiatStatus: true,
      dialog: false,
      service_url: "", //判断客服跳转类型
      thirDialog: false,
      androidInfo: {},
      iosInfo: {},
    };
  },

  computed: {
    getuserinfo() {
      return this.$store.state.user.userInfo;
    },
    getToken() {
      return this.$store.state.user.token;
    },
    local() {
      return this.$store.state.user.local;
    },
    levelPage() {
      return this.$store.state.user.levelPage;
    },
    nftPage() {
      console.log(this.$store.state.user.nftPage);
      return this.$store.state.user.nftPage;
    },
    languages() {
      return this.$store.state.user.localary;
    },
  },
  watch: {
    levelPage: function(val) {
      if (val) {
        console.log("levelPage");
        this.getTab();
      }
    },
    nftPage: function(val) {
      if (val) {
        this.getTab();
      }
    },
    virtual_wallet: function() {
      this.tab = [];
      this.getShowWealth();
    },
    getToken: function(data) {
      if (data) {
        console.log("token");
        this.islogin = true;
        this.getUnread();
      } else {
        this.islogin = false;
      }
    },
    local: function(val) {
      if (val) {
        this.curentLang = this.languages.filter((item) => {
          return item.language_tag === val;
        });
        this.getTab();
      }
    },
    "$route.query.local"(to, from) {
      console.log(to, from);
      if (to && to !== from) {
        // console.log(to);
        this.$store.dispatch("user/changeLocal", to).then(() => {
          this.getTab();
        });
        // let id = Number(to.query.id);
        // this.$store.dispatch('product/fetchProductDetail', { id });
      }
    },
    languages: function(val) {
      this.curentLang = val.filter((item) => {
        return item.language_tag === this.local;
      });
    },
  },
  mounted() {
    this.$store = useStore();
    const p1 = this.getSysConfig();
    // const p2 = this.getFastAgainstStatus();
    // this.getAppRenewals(1);
    // this.getAppRenewals(2);
    console.log('是否要显示111')
    // , p2
    Promise.all([p1]).then(() => {
      console.log('是否要显示？？')
      this.getShowWealth();
    });
    this.curentLang = this.languages.filter((item) => {
      return item.language_tag === this.local;
    });
  },
  methods: {
    //切换模拟账号状态
    onChangeVirtualWallet() {
      let that = this;
      that.$store.dispatch("user/changeVirtualWallet", !that.virtual_wallet);
    },
    getAppRenewals(type) {
      getAppRenewal(type).then((res) => {
        if (type === 1) {
          this.androidInfo = res.data;
        } else {
          this.iosInfo = res.data;
        }
      });
    },
    leverIschoice(id) {
      if (id === 4) {
        this.ischoice = true;
        this.isfinancial = false;
        this.isTrading = false;
        this.isNFT = false;
      }
      if (id === 5) {
        this.ischoice = false;
        this.isfinancial = true;
        this.isTrading = false;
        this.isNFT = false;
      }
      if (id === 6) {
        this.ischoice = false;
        this.isfinancial = false;
        this.isTrading = true;
        this.isNFT = false;
      }
      if (id === 11 && this.meta_switch && this.nft_entrance) {
        this.ischoice = false;
        this.isfinancial = false;
        this.isTrading = false;
        this.isNFT = true;
      }
    },
    leverNochoice(id) {
      if (id === 4) {
        this.ischoice = false;
      }
      if (id === 5) {
        this.isfinancial = false;
      }
      if (id === 6) {
        this.isTrading = false;
      }
      if (id === 11 && this.meta_switch && this.nft_entrance) {
        this.isNFT = false;
      }
    },
    getTab() {
      let list = [...this.tab];
      list.forEach((ele) => {
        if (ele.val) {
          if (ele.id === 4) {
            ele.val = this.levelPage === "level" ? "lever" : this.levelPage;
            ele.title =
              this.levelPage === "level"
                ? this.$t("header.lever")
                : this.$t("header." + this.levelPage);
          } else if (ele.id === 11) {
            ele.val = this.nftPage === "NFT" ? "NFT" : this.nftPage;
            ele.title =
              this.nftPage === "NFT" ? "NFT" : this.$t("universe.universe");
          } else if (ele.id === 151) {
            ele.title = this.$t("stock.stockInvestment");
          } else if (ele.id === 152) {
            ele.title = this.$t("stock.stockLever");
          } else if (ele.id === 153) {
            ele.title = this.$t("stock.stockSecond");
          } else if (ele.id === 12) {
            ele.title = this.$t("worldCup.worldCup");
          } else if (ele.id === 13) {
            ele.title = this.$t("pledge.pledgeLoan");
          } else if (ele.id === 14) {
            ele.title = this.$t("newCoin.subscription");
          } else if (ele.id === 154) {
            ele.title = this.$t("newCoin.stockSubscription");
          } else if (ele.id === 155) {
            ele.title = this.$t("loan.loan");
          } else if (ele.id === 156) {
            ele.title = this.$t("foreign.forexTrad");
          } else if (ele.id === 15) {
            ele.title = this.$t("hosting.robotHosting");
          } else if (ele.id === 1) {
            ele.title = this.$t("newTheme.BuyCoins");
          } else {
            ele.title = this.$t("header." + ele.val);
          }
        }
      });
      this.tab = [...list];
      console.log(this.tab,'tab导航----')
      this.copyTab = [...list];
    },
    getSysConfig() {
      return new Promise((resolve) => {
        let that = this;
        getConfig().then((res) => {
          if (res.code === 1) {
            let datas=[  {
              "key": "invitation_code_status",
              "notes": "邀请码是否必填(true-是，false-否)",
              "value": false
          },
          {
              "key": "template_pc",
              "notes": "PC模板",
              "value": "1"
          },
          {
              "key": "template_app",
              "notes": "APP模板",
              "value": "1"
          },
          {
              "key": "wallet_transaction",
              "notes": "币币钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_legal",
              "notes": "法币钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_lever",
              "notes": "合约钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_second_lever",
              "notes": "秒合约钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_project",
              "notes": "理财钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_stock_second_lever",
              "notes": "股票秒合约钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_stock_lever",
              "notes": "股票合约钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "wallet_stock",
              "notes": "股票现货钱包是否展示(true-是，false-否)",
              "value": true
          },
          {
              "key": "easy_buy",
              "notes": "快捷买币(true-显示，false-隐藏)",
              "value": true
          },
          {
              "key": "easy_buy_type",
              "notes": "快捷买币跳转类型(1-链接，2-客服，3-法币页，4-三方联系)",
              "value": 1
          },
          {
              "key": "easy_buy_url",
              "notes": "跳转url",
              "value": "https://direct.lc.chat/17284854/"
          },
          {
              "key": "defi_ore_status",
              "notes": "挖矿入口(true-展示，false-隐藏)",
              "value": false
          },
          {
              "key": "wealth_management_status",
              "notes": "理财入口(true-展示，false-隐藏)",
              "value": true
          },
          {
              "key": "stock_status",
              "notes": "股票投资入口(true-展示，false-隐藏)",
              "value": true
          },
          {
              "key": "follow_status",
              "notes": "跟单入口(true-展示，false-隐藏)",
              "value": false
          },
          {
              "key": "defi_ore_logo",
              "notes": "defi挖矿标识(none-无，hot，new)",
              "value": "new"
          },
          {
              "key": "wealth_management_logo",
              "notes": "理财宝标识(none-无，hot，new)",
              "value": "new"
          },
          {
              "key": "stock_status",
              "notes": "股票现货交易入口开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "stock_lever_status",
              "notes": "股票合约开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "stock_second_lever_status",
              "notes": "股票秒合约开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "fiat_currency_transaction_status",
              "notes": "法币交易开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "currency_transaction_status",
              "notes": "币币交易开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "lever_status",
              "notes": "合约开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "second_lever_status",
              "notes": "秒合约开关(true-开，false-关)",
              "value": true
          },
          {
              "key": "about_us_pc",
              "notes": "pc关于我们模板配置（1-默认模板，2-自定义）",
              "value": 1
          },
          {
              "key": "about_us_npc",
              "notes": "APP/H5关于我们模板配置（1-默认模板，2-自定义）",
              "value": 1
          },
          {
              "key": "about_us_pc_custom",
              "notes": "pc关于我们自定义内容",
              "value": ""
          },
          {
              "key": "about_us_npc_custom",
              "notes": "APP/H5关于我们自定义内容",
              "value": ""
          },
          {
              "key": "verify_switch",
              "notes": "实名认证开关（1-币币交易，2-合约交易，3-秒合约，4-理财，5-法币交易，6-提现，7-挖矿，8-股票現貨，9-股票合約，10-股票期權，11-外汇）",
              "value": [
                  false,
                  false,
                  false,
                  false,
                  false,
                  false,
                  false,
                  false,
                  false,
                  false,
                  false
              ]
          },
          {
              "key": "default_language_tag",
              "notes": "默认语言标识",
              "value": "zh"
          },
          {
              "key": "service_url",
              "notes": "客服跳转配置：online-在线客服页(Z)；contact-社交客服页；Monline-在线客服页(M)",
              "value": "online"
          },
          {
              "key": "maintenance_status",
              "notes": "维护状态",
              "value": false
          },
          {
              "key": "cancel_withdraw_status",
              "notes": "用户提现撤销状态设置（true-开启，false-关闭）",
              "value": true
          },
          {
              "key": "uid_status",
              "notes": "uid显示开关（true-开启，false-关闭）",
              "value": false
          },
          {
              "key": "metaverse_status",
              "notes": "元宇宙分类开关（true-开启，false-关闭）",
              "value": false
          },
          {
              "key": "nft_status",
              "notes": "NFT分类开关（true-开启，false-关闭）",
              "value": false
          },
          {
              "key": "default_phone_area_code",
              "notes": "默认注册国家code",
              "value": "USA"
          },
          {
              "key": "currency_subscription_status",
              "notes": "新币申购开关状态(true-开，false-关)",
              "value": false
          },
          {
              "key": "currency_subscription_logo",
              "notes": "新币申购标识(none-无，hot，new)",
              "value": "none"
          },
          {
              "key": "wallet_nft",
              "notes": "nft账户(true-显示，false-隐藏)",
              "value": false
          },
          {
              "key": "nft_entrance",
              "notes": "nft入口(true-显示，false-隐藏)",
              "value": false
          },
          {
              "key": "world_cup",
              "notes": "世界杯竞猜入口(true-显示，false-隐藏)",
              "value": false
          },
          {
              "key": "wealth_management_type",
              "notes": "理财和机器人托管切换(1-理财，2-机器人托管)",
              "value": 1
          },
          {
              "key": "withdraw_platform_user",
              "notes": "提现平台用户(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "meta_switch",
              "notes": "元宇宙入口(true-显示，false-隐藏)",
              "value": false
          },
          {
              "key": "wallet_status",
              "notes": "上链开关(true-开启，false-关闭)",
              "value": true
          },
          {
              "key": "recharge_manual",
              "notes": "充值提交(true-开启，false-关闭)",
              "value": true
          },
          {
              "key": "recharge_manual_amount",
              "notes": "转账数量(true-开启，false-关闭)",
              "value": true
          },
          {
              "key": "recharge_manual_hash",
              "notes": "hash地址/发送地址(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "recharge_manual_transaction",
              "notes": "转账截图(true-开启，false-关闭)",
              "value": true
          },
          {
              "key": "stock_subscription_status",
              "notes": "新股申购开关状态(true-开，false-关)",
              "value": false
          },
          {
              "key": "stock_subscription_logo",
              "notes": "新股申购标识(none-无，hot，new)",
              "value": "none"
          },
          {
              "key": "platform_cover_image",
              "notes": "平台封面图",
              "value": ""
          },
          {
              "key": "platform_video_link",
              "notes": "平台视频简介",
              "value": ""
          },
          {
              "key": "foreign_exchange",
              "notes": "外汇入口(true-开，false-关)",
              "value": false
          },
          {
              "key": "wallet_forex",
              "notes": "外汇钱包(true-显示，false-隐藏)",
              "value": true
          },
          {
              "key": "default_wallet",
              "notes": "默认钱包(0-无，1-币币，2-法币，3-股票现货)",
              "value": 1
          },
          {
              "key": "remember_password",
              "notes": "记住密码(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "holding_id_card",
              "notes": "手持照片(认证)(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "platform_content_management",
              "notes": "平台内容开启[帮助中心,公告中心,资讯中心](true-开启，false-关闭)",
              "value": [
                  false,
                  false,
                  false
              ]
          },
          {
              "key": "pledge_borrowing_status",
              "notes": "质押借币开关(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "virtual_wallet",
              "notes": "虚拟账户(true-开启，false-关闭)",
              "value": false
          },
          {
              "key": "credit_score_status",
              "notes": "信誉分开关(true-开启，false-关闭)",
              "value": true
          },
          {
              "key": "stock_closed_operation",
              "notes": "未开市是否可平仓(true-是,false-否)",
              "value": false
          }];
            that.systemInfos = datas;
            resolve();
          }
        });
      });
    },
    getFastAgainstStatus() {
      return new Promise((resolve) => {
        getFastAgainstStatusApi().then((res) => {
          this.flash_against_status = res.data;
          this.$store.commit("user/SET_FASTEXCHANGE", res.data);
          resolve();
        });
      });
    },
    //判断是否要显示
    getShowWealth() {
      this.systemInfos?.forEach((ele) => {
        if (ele.key === "wealth_management_status") {
          this.wealth_management_status = ele.value;
        }
        if (ele.key === "defi_ore_status") {
          this.defi_ore_status = ele.value;
        }
        if (ele.key === "stock_status") {
          this.stock_status = ele.value;
        }
        if (ele.key === "currency_subscription_status") {
          this.currency_subscription_status = ele.value;
        }
        if (ele.key === "wealth_management_type") {
          this.wealth_management_type = ele.value;
        }
        if (ele.key === "stock_subscription_logo") {
          this.stock_subscription_logo = ele.value;
        }
        if (ele.key === "stock_subscription_status") {
          this.stock_subscription_status = ele.value;
        }
        if (ele.key === "pledge_borrowing_status") {
          this.pledge_borrowing_status = ele.value;
        }
        if (ele.key === "currency_subscription_logo") {
          this.currency_subscription_logo = ele.value;
        }
        if (ele.key === "wealth_management_logo") {
          this.wealth_management_logo = ele.value;
        }
        if (ele.key === "defi_ore_logo") {
          this.defi_ore_logo = ele.value;
        }
        if (ele.key === "fiat_currency_transaction_status") {
          this.fiat_currency_transaction_status = ele.value;
        }
        if (ele.key == "easy_buy_type") {
          this.easy_buy_type = ele.value;
        }
        if (ele.key == "foreign_exchange") {
          this.foreign_exchange = ele.value;
        }
        if (ele.key == "easy_buy_url") {
          this.url = ele.value;
        }
        if (ele.key == "second_lever_status") {
          this.second_lever_status = ele.value;
        }
        if (ele.key == "lever_status") {
          this.lever_status = ele.value;
        }
        if (ele.key == "currency_transaction_status") {
          this.currency_transaction_status = ele.value;
        }
        if (ele.key == "nft_entrance") {
          this.nft_entrance = ele.value;
        }
        if (ele.key == "meta_switch") {
          this.meta_switch = ele.value;
        }
        if (ele.key == "world_cup") {
          this.world_cup = ele.value;
        }
        if (ele.key == "stock_lever_status") {
          this.stock_lever_status = ele.value;
        }
        if (ele.key == "foreign_exchange") {
          this.foreign_exchange = ele.value;
        }
        if (ele.key == "stock_second_lever_status") {
          this.stock_second_lever_status = ele.value;
        }
        // if (ele.key == "virtual_wallet") {
        //   this.virtual_wallet = ele.value;
        // }
        if (ele.key === "service_url") {
          const show = ele.value; //online-在线客服页；contact-社交客服页
          this.service_url = show;
          this.dialog = false;
          if (this.service_url === "contact") {
            // 在线客服打开注释
            // zE(function() {
            //   zE.hide();
            // });
          }
        }
      });
      let list = [...this.tab];
      list.forEach((ele) => {
        if (ele.id === 14) {
          ele.title = this.$t("newCoin.subscription");
        } else if (ele.id === 154) {
          ele.title = this.$t("newCoin.stockSubscription");
        } else if (ele.id === 155) {
          ele.title = this.$t("loan.loan");
        } else if (ele.id === 156) {
          ele.title = this.$t("foreign.forexTrad");
        } else if (ele.id === 1) {
          ele.title = this.$t("newTheme.BuyCoins");
        } else {
          ele.title = this.$t("header." + ele.val);
        }
      });
      /**
       * 1legal,2quote，5financial,6trading，7flashAgainst，8bibi,9wealthTreasure,15robotHosting,16和4lever，17second
       * 10DefiMining,11NFT和universe,12cup,14subscription
       */
      console.log(this.currency_transaction_status,'状态')
      list.push({
          title: this.$t("header.bibi"),
          path: "/deal",
          id: 8,
          val: "bibi",
        });
      if (
        (this.currency_transaction_status ||
          this.lever_status ||
          this.second_lever_status ||
          this.stock_status ||
          this.second_lever_status ||
          this.stock_second_lever_status) &&
        !this.virtual_wallet
      ) {
        list.push({
          title: this.$t("header.quote"),
          path: "/quote",
          id: 2,
          val: "quote",
        });
      }
      if (
        this.flash_against_status &&
        this.currency_transaction_status &&
        !this.virtual_wallet
      ) {
        list.push({
          title: this.$t("header.trading"),
          path: "trading",
          id: 6,
          val: "trading",
        });
      } else if (
        this.flash_against_status &&
        !this.currency_transaction_status &&
        !this.virtual_wallet
      ) {
        list.push({
          title: this.$t("header.flashAgainst"),
          path: "/flashAgainst",
          id: 7,
          val: "flashAgainst",
        });
      } else if (
        this.currency_transaction_status &&
        ((!this.flash_against_status && !this.virtual_wallet) ||
          this.virtual_wallet)
      ) {
        list.push({
          title: this.$t("header.bibi"),
          path: "/deal",
          id: 8,
          val: "bibi",
        });
      }
      if (this.second_lever_status || this.lever_status) {
        if (!this.lever_status && this.second_lever_status) {
          list.push({
            title: this.$t("header.second"),
            path: "secondlever",
            id: 17,
            val: "second",
          });
        } else if (this.lever_status && !this.second_lever_status) {
          list.push({
            title: this.$t("header.lever"),
            path: "lever",
            id: 16,
            val: "lever",
          });
        } else {
          list.push({
            title: this.$t("header.lever"),
            path: "lever",
            id: 4,
            val: "lever",
          });
        }
      }
      if (this.fiat_currency_transaction_status && !this.virtual_wallet) {
        let obj = {
          title: this.$t("newTheme.BuyCoins"),
          path: "/fiat",
          id: 1,
          val: "legal",
        };
        list.splice(1, 0, obj);
      }
      if (
        (this.wealth_management_status ||
          this.defi_ore_status ||
          this.currency_subscription_status ||
          this.stock_subscription_status ||
          this.pledge_borrowing_status ||
          this.foreign_exchange) &&
        !this.virtual_wallet
      ) {
        if (
          (this.wealth_management_status && this.defi_ore_status) ||
          (this.defi_ore_status && this.currency_subscription_status) ||
          (this.wealth_management_status &&
            this.currency_subscription_status) ||
          (this.stock_subscription_status && this.wealth_management_status) ||
          (this.stock_subscription_status && this.defi_ore_status) ||
          (this.currency_subscription_status &&
            this.stock_subscription_status) ||
          (this.pledge_borrowing_status && this.wealth_management_status) ||
          (this.pledge_borrowing_status && this.defi_ore_status) ||
          (this.pledge_borrowing_status && this.currency_subscription_status) ||
          (this.pledge_borrowing_status && this.stock_subscription_status) ||
          (this.foreign_exchange && this.wealth_management_status) ||
          (this.foreign_exchange && this.defi_ore_status) ||
          (this.foreign_exchange && this.currency_subscription_status) ||
          (this.foreign_exchange && this.stock_subscription_status) ||
          (this.foreign_exchange && this.pledge_borrowing_status)
        ) {
          list.push({
            title: this.$t("header.financial"),
            path: "Financial",
            id: 5,
            val: "financial",
          });
        } else if (
          this.wealth_management_status &&
          !this.defi_ore_status &&
          !this.currency_subscription_status &&
          !this.stock_subscription_status &&
          !this.pledge_borrowing_status &&
          !this.foreign_exchange
        ) {
          if (this.wealth_management_type === 1) {
            list.push({
              title: this.$t("header.wealthTreasure"),
              path: "/wealthFinancial",
              id: 9,
              val: "wealthTreasure",
            });
          } else {
            list.push({
              title: this.$t("hosting.robotHosting"),
              path: "/wealthFinancial",
              id: 15,
              val: "robotHosting",
            });
          }
        } else if (
          !this.wealth_management_status &&
          this.defi_ore_status &&
          !this.currency_subscription_status &&
          !this.stock_subscription_status &&
          !this.pledge_borrowing_status &&
          !this.foreign_exchange
        ) {
          list.push({
            title: this.$t("header.DefiMining"),
            path: "/defiFinancial",
            id: 10,
            val: "DefiMining",
          });
        } else if (
          !this.wealth_management_status &&
          !this.defi_ore_status &&
          this.currency_subscription_status &&
          !this.stock_subscription_status &&
          !this.pledge_borrowing_status &&
          !this.foreign_exchange
        ) {
          list.push({
            title: this.$t("newCoin.subscription"),
            path: "/sgdSubscription",
            id: 14,
            val: "subscription",
          });
        } else if (
          !this.wealth_management_status &&
          !this.defi_ore_status &&
          !this.currency_subscription_status &&
          this.stock_subscription_status &&
          !this.pledge_borrowing_status &&
          !this.foreign_exchange
        ) {
          list.push({
            title: this.$t("newCoin.stockSubscription"),
            path: "/newIPO",
            id: 154,
            val: "stockSubscription",
          });
        } else if (
          !this.wealth_management_status &&
          !this.defi_ore_status &&
          !this.currency_subscription_status &&
          !this.stock_subscription_status &&
          this.pledge_borrowing_status &&
          !this.foreign_exchange
        ) {
          list.push({
            title: this.$t("loan.loan"),
            path: "/loan",
            id: 155,
            val: "",
          });
        } else if (
          !this.wealth_management_status &&
          !this.defi_ore_status &&
          !this.currency_subscription_status &&
          !this.stock_subscription_status &&
          !this.pledge_borrowing_status &&
          this.foreign_exchange
        ) {
          list.push({
            title: this.$t("foreign.forexTrad"),
            path: "/foreignExchange",
            id: 156,
            val: "",
          });
        }
      } else if (this.virtual_wallet && this.foreign_exchange) {
        list.push({
          title: this.$t("foreign.forexTrad"),
          path: "/foreignExchange",
          id: 156,
          val: "",
        });
      }
      if (this.nft_entrance && !this.meta_switch && !this.virtual_wallet) {
        this.$store.commit("user/SET_NFT_PAGE", "NFT");
        list.push({
          title: "NFT",
          path: "/nftHome",
          id: 11,
          val: "NFT",
        });
      } else if (this.meta_switch && !this.virtual_wallet) {
        this.$store.commit("user/SET_NFT_PAGE", "universe");
        list.push({
          title: this.$t("universe.universe"),
          path: "/universeHome",
          id: 11,
          val: "universe",
        });
      }
      if (this.world_cup && !this.virtual_wallet) {
        list.push({
          title: this.$t("worldCup.worldCup"),
          path: "/cup",
          id: 12,
          val: "worldCup",
        });
      }
      //股票相关页面
      if (this.stock_status) {
        list.push({
          title: this.$t("stock.stockInvestment"),
          path: "/Stock",
          id: 151,
          val: "stockInvestment",
        });
      }
      if (this.stock_lever_status) {
        list.push({
          title: this.$t("stock.stockLever"),
          path: "/stockLever",
          id: 152,
          val: "stockLever",
        });
      }
      if (this.stock_second_lever_status) {
        list.push({
          title: this.$t("stock.stockSecond"),
          path: "/stockSecond",
          id: 153,
          val: "stockSecond",
        });
      }
      this.tab = [...list];
      console.log(123123,this.tab);
      this.getTab();
    },
    jumppath(path) {
      this.$router.push(path);
    },
    backhome() {
      this.$router.push("/");
    },
    hiddenChoice() {
      this.ischoice = false;
      this.isfinancial = false;
      this.isTrading = false;
      this.NFT = false;
    },
    choice(name) {
      if (this.fiat_currency_transaction_status) {
        let indexTab = this.tab.findIndex((ele) => {
          return ele.id === 4;
        });
        this.tab[indexTab].title = name;
      } else {
        let indexTab = this.tab.findIndex((ele) => {
          return ele.id === 6;
        });
        this.tab[indexTab].title = name;
      }
    },
    choiceNft(name) {
      if (this.tab && this.tab.length > 0) {
        this.tab.forEach((ele) => {
          if (ele.id === 11) {
            ele.title = name;
          }
        });
      }
    },
    jump(i, path) {
      if (i === 4) {
		localStorage.setItem('bizhong','BTC')
        this.ischoice = !this.ischoice;
        this.isfinancial = false;
        this.isTrading = false;
        this.isNFT = false;
      } else if (i === 5) {
        this.isfinancial = !this.isfinancial;
        this.ischoice = false;
        this.isTrading = false;
        this.isNFT = false;
      } else if (i === 6) {
        this.isTrading = !this.isTrading;
        this.ischoice = false;
        this.isfinancial = false;
        this.isNFT = false;
      } else if (i === 11 && this.meta_switch && this.nft_entrance) {
        this.isTrading = false;
        this.ischoice = false;
        this.isfinancial = false;
        this.isNFT = !this.isNFT;
      } else if (i === 1) {
        if (this.easy_buy_type === 2) {
          if (this.service_url === "contact") {
            this.dialog = true;
          } else {
            this.chatActive();
            // 客服代码
            // zE.activate();
          }
        } else if (this.easy_buy_type === 1) {
          const url = this.url;
          const a = document.createElement("a");
          a.target = "_blank";
          a.href = url;
          a.click();
        } else if (this.easy_buy_type === 3) {
          if (!this.fiat_currency_transaction_status) {
            ElMessage.error(this.$t("formTip.noOpen"));
            return false;
          }
          this.$router.push("/fiat");
        } else if (this.easy_buy_type === 4) {
          this.thirDialog = true;
        }
      } else {
        this.$router.push(path);
      }

      console.log(this.ischoice, this.isfinancial, this.isTrading);
    },
    // 获取站内信未读数量
    getUnread() {
      unreadStatistics().then((res) => {
        console.log(res, "getUnread");
        if (res.code === 200) {
          this.unReadNum = res.data.value;
        }
      });
    },
    hide() {
      this.islanguage = false;
    },
  },
};
</script>

<style lang="less" scoped>

.header {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  position: fixed;
  z-index: 2009;
  top: 0;
  left: 0;
}
.transparent {
  background-image: url("../../assets/theme1/loginbg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}
.header-bg {
  background-color: #4db4a7;
}
.header-left {
  display: flex;
  justify-content: space-between;
  img {
    width: 98px;
    height: 42px;
    margin-inline-end: 62px;
  }
}
.titletab {
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.nologheader-right {
  // width: 313px;
  justify-content: space-between;
}
.logheader-right {
  // width: 323px;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.log-box {
  align-items: center;
}
.regist {
  // width: 48px;
  // height: 24px;
  padding: 2px 10px;
  border-radius: 4px;
  line-height: 24px;
  margin-inline-start: 40px;
}
.lang-box {
  height: 24px;
  min-width: 96px;
  line-height: 24px;
  border: 1px solid white;
  border-radius: 6px;
  position: relative;
  z-index: 100;
}
.person-box {
  max-width: 256px;
  margin: 0 55px;
  height: 100%;
  align-items: center;
}
.other {
  // width: 183px;
  height: 100%;
}
.ml-30 {
  margin-inline-start: 30px;
}
.round {
  width: 20px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  i {
    font-size: 22px;
  }
}
// 选择合约交易弹窗
.sign-tab {
  position: relative;
  height: 100%;
  // line-height: 60px;
  padding-top: 20px;
  padding-bottom: 15px;
  margin-inline-end: 30px;
}
.lever-down {
  width: 140px;
  position: absolute;
  right: -53px;
  top: 45px;
}
// 个人中心弹窗
.person-buble {
  max-width: 240px;
  min-width: 170px;
  position: absolute;
  top: 60px;
  left: -85px;
  // padding: 10px 0;
}
// 站内信弹窗
.letter-buble {
  width: 260px;
  position: absolute;
  top: 60px;
  left: -130px;
  padding: 10px 0;
}
.badge {
  background: @yellow;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.posi {
  position: absolute;
  right: 0;
  top: 15px;
}
.text-24 {
  font-size: 24px;
}
.ml-4 {
  margin-inline-start: 4px;
}
.pd-demo-btn {
  padding: 5px 10px;
  margin-right: -55px;
}
.thirdbox {
  :deep(.el-dialog__body) {
    padding: 10px 30px 40px 30px;
  }
  :deep(.el-dialog__header) {
    border-bottom: none;
  }
}
</style>
